<template>
  <view class="index-content">
    <Navbar :hideBtn="true" title="首页" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
    <view class="index-block">
      <u-row gutter="16"  @click="navigateTo('/pages/device/index')">
        <u-col span="12">
          <view class="item-tj item-tj-frist u-border-bottom">
            <view style=" height: 100%; position: relative; ">
              <view style="position: absolute; bottom: 65rpx; left: 16rpx;">
                <u-icon size="20px" name="clock" color="#ff7722" label="设备" labelColor="black"
                        labelSize="18px"></u-icon>
              </view>
              <view style="position: absolute; bottom: 65rpx; right: 16rpx;">
                <u-icon size="20px" name="arrow-right" color="black" label="实时看板" labelColor="black"
                        labelSize="18px" labelPos="left"></u-icon>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16"  @click="navigateTo('/pages/device/index?type=1')">
        <u-col span="12">
          <view class="item-tj item-tj-frist u-border-bottom">
            <view style=" height: 100%; position: relative; ">
              <view style="position: absolute; bottom: 65rpx; left: 16rpx;">
                <u-icon size="20px" name="checkmark-circle" color="#f44e63" label="生产" labelColor="black"
                        labelSize="18px"></u-icon>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="0" :endVal="devs.filter((item)=>{return item.data&&item.data.substring(3) == '1'}).length" :duration="1500" font-size="18px" color="black"
                            separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16"  @click="navigateTo('/pages/device/index?type=2')">
        <u-col span="12">
          <view class="item-tj item-tj-frist u-border-bottom">
            <view style=" height: 100%; position: relative; ">
              <view style="position: absolute; bottom: 65rpx; left: 16rpx;">
                <u-icon size="20px" name="hourglass" color="#5db6fe" label="待机" labelColor="black"
                        labelSize="18px"></u-icon>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="0" :endVal="devs.filter((item)=>{return item.data&&item.data.substring(1,2) == '1'||item.data=='0000'}).length" :duration="1500" font-size="18px" color="black"
                            separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" @click="navigateTo('/pages/device/index?type=3')">
        <u-col span="12">
          <view class="item-tj item-tj-frist ">
            <view style=" height: 100%; position: relative; ">
              <view style="position: absolute; bottom: 65rpx; left: 16rpx;">
                <u-icon size="20px" name="close-circle" color="#27cfa3" label="关机" labelColor="black"
                        labelSize="18px"></u-icon>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="0" :endVal="devs.filter((item)=>{return item.data&&item.data.substring(0,1) == '1'||item.data==null}).length" :duration="1500" font-size="18px" color="black"
                            separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { getDevs } from '../../api/device'

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      isCanvas2d: true,
	  devs: []
    }
  },
  mounted() {
  	
  },
  onShow() {
  	this.getDevs()
  },
  methods:{
    navigateTo(url) {
      uni.navigateTo({url: url})
    },
	getDevs(){
		getDevs().then((res)=>{
			this.devs = res.data
			getApp().globalData.devs = res.data
		})
	}
  }
}
</script>

<style lang="scss">
.index-content {
  background: linear-gradient(to bottom, #5599ff 30%, #ffffff 70%);
  min-height: 100vh;
}

.index-block {
  margin: 35% 20px 0 20px;
  padding: 5px 30px 5px 30px;
  line-height: 32px;
  background: white;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  border-radius: 12px;
}


.item-tj {
  height: 160rpx;
  &-frist {
    background-color: rgba($color: white, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}

</style>
